<template>
  <div class="tab-box">
    <div v-if="navigator === 'mobile'" class="h5">
      <div
        v-for="(item, index) in componentData.list"
        :key="index"
        class="navbar-in"
        @click="currentNavbar = index"
      >
        <div
          :style="{
            backgroundColor:
              currentNavbar === index ? componentData.activeColor : componentData.defaultColor,
          }"
          class="icon-box"
        >
          <img
            :src="item.icon.url"
            alt="solution"
            :style="{
              filter: `drop-shadow(${
                currentNavbar === index ? '#fff' : componentData.activeColor
              } 100px 0)`,
            }"
          />
        </div>
        <span class="ft-22">{{ item.titleZh }}</span>
      </div>
    </div>
    <div v-else class="pc">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="navbar-in"
        @click="currentNavbar = index"
      >
        <div
          :style="{
            backgroundColor:
              currentNavbar === index ? componentData.activeColor : componentData.defaultColor,
          }"
          class="icon-box"
        >
          <img
            :src="item.icon.url"
            alt="solution"
            :style="{
              filter: `drop-shadow(${
                currentNavbar === index ? '#fff' : componentData.activeColor
              } 100px 0)`,
            }"
          />
        </div>
        <span class="ft-22 ft-bold">{{ item.titleZh }}</span>
        <span class="ft-16">{{ item.subtitleZh }}</span>
      </div>
      <div v-if="componentData.list.length > 6" key="more" class="navbar-in">
        <div class="icon-box active">
          <img src="@/assets/images/tab-more.png" alt="solution" class="more" />
        </div>
        <span class="ft-22 ft-bold">更多解决方案</span>
        <div class="right-box">
          <i class="el-icon-right"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    componentData: {
      type: Object,
      default: () => ({}),
    },
    // 设备型号
    navigator: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      currentNavbar: 0,
    }
  },
  computed: {
    list() {
      if (this.componentData.list.length <= 6) {
        return this.componentData.list.slice(0, 6)
      }
      return this.componentData.list.slice(0, 5)
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.tab-box {
  .h5 {
    width: 100%;
    height: 174px;
    background-color: #f6f7f9;
    overflow: auto;
    padding: 30px 0 0 12px;
    display: flex;
    flex-wrap: nowrap;
    color: rgba(0, 0, 0, 0.65);

    .navbar-in {
      flex: 0 0 100px;
      height: 114px;
      background: #fff;
      box-shadow: 1px 3px 8px 0 rgba(7, 98, 203, 0.16);
      align-items: center;
      text-align: center;
      margin-right: 12px;
      padding: 0 15px;
      line-height: 15px;

      .icon-box {
        display: block;
        margin: 18px auto 12px auto;
        width: 39px;
        height: 39px;
        border-radius: 50%;
        background-color: #eef6fe;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 20px;
          height: 20px;
          filter: drop-shadow(#0261bc 100px 0);
          transform: translateX(-100px);
        }
      }

      span {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }

    .ft-22 {
      font-size: 11px;
      font-weight: bold;
    }
  }

  .pc {
    .width(1200);
    .pd(110, 0, 80, 0);

    border: 1px dashed #e0e4ec;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;

    .navbar-in {
      .width(380);
      .height(320);
      .pd(60, 30, 0, 30);
      .mg(0, 0, 30, 0);

      &:nth-child(3n + 2) {
        .mg(0, 26, 30, 26);
      }

      align-items: center;
      display: flex;
      flex-direction: column;
      background: #fff;
      cursor: pointer;
      box-shadow: 1px 3px 16px rgba(7, 98, 203, 0.16);

      .right-box {
        .width(120);
        .height(32);
        .lineH(32);
        .ft(24);
        .mg(10, 0, 0, 0);

        background: #0762cb;
        border-radius: 16px;
        color: #fff;
        text-align: center;
      }

      .icon-box {
        .width(78);
        .height(78);

        border-radius: 50%;
        background-color: #eef6fe;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          .width(40);
          .height(40);

          filter: drop-shadow(#0261bc 100px 0);
          transform: translateX(-100px);
        }

        &.active {
          img {
            .width(78);
            .height(78);

            filter: drop-shadow(transparent 0 0);
            transform: translateX(0);
          }
        }
      }

      // .more {
      //   .width(78);
      //   .height(78);
      // }

      .ft-22 {
        .ft(22);
        .lineH(22);
        .mg(40, 0, 16, 0);

        text-align: center;
      }

      .ft-16 {
        .ft(16);
        .lineH(20);

        word-break: break-all;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-align: center;
        text-align: center;
      }
    }
  }
}
</style>
